<template>
  <GlobalBG title="报警事件" :showBack="true" :showCollege="false">
    <view class="container">
      <!-- 标题栏 -->
      <view class="header">
        <text class="title">报警事件</text>
      </view>
      <!-- 报警卡片列表 -->
      <view class="card-list">
        <view class="card" v-for="(alarm, index) in alarms" :key="index">
          <view class="card-header">
            <text class="location">{{ alarm.monitoringPoint }}</text>
          </view>
          <view class="data-section">
            <view class="data-item">
              <text class="label">当前水位/m</text>
              <text class="value red">{{ alarm.currentValue }}</text>
            </view>
            <view class="data-item">
              <text class="label">预警阈值/m</text>
              <text class="value blue">{{ alarm.warningThreshold }}</text>
            </view>
          </view>
          <view class="time-section">
            <text>报警时间：</text>
            <text>{{ alarm.time }}</text>
          </view>
        </view>
      </view>
    </view>
  </GlobalBG>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import GlobalBG from '@/components/GlobalBG.vue'; // 确保路径正确

// 模拟报警数据
const alarms = ref([
  {
    monitoringPoint: '海宇道、临开西路交口',
    currentValue: 0.92,
    warningThreshold: 0.92,
    time: '2025-02-22 12:32',
  },
  {
    monitoringPoint: '海宇道、临开西路交口',
    currentValue: 0.92,
    warningThreshold: 0.92,
    time: '2025-02-22 12:32',
  },
  {
    monitoringPoint: '海宇道、临开西路交口',
    currentValue: 0.92,
    warningThreshold: 0.92,
    time: '2025-02-22 12:32',
  },
  {
    monitoringPoint: '海宇道、临开西路交口',
    currentValue: 0.92,
    warningThreshold: 0.92,
    time: '2025-02-22 12:32',
  },
]);
</script>

<style lang="scss" scoped>
// 全局样式
.container {
  padding: 24rpx;
  background-color: #f2f4f7;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0 10rpx 0;
}

.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 29rpx;
  color: #000000;
  line-height: 42rpx;
  text-align: right;
  font-style: normal;
}

.card-list {
  gap: 20rpx;
  overflow-y: auto; // 添加滚动条
  max-height: calc(100vh - 200rpx); // 最大高度为全屏高度减去标题栏等占位
}

.card {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 24rpx 50rpx;
  box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
  margin: 20rpx 0;
}

.card-header {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.data-section {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 27rpx;
  color: #333333;
  line-height: 38rpx;
  text-align: left;
  font-style: normal;
}

.data-item {
  flex: 1;
}

.value {
  &.red {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 27rpx;
    color: #ff2121;
    line-height: 38rpx;
    text-align: left;
    font-style: normal;
    margin-left: 20rpx;
  }
  &.blue {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 27rpx;
    color: #2263bf;
    line-height: 38rpx;
    text-align: left;
    font-style: normal;
    margin-left: 20rpx;
  }
}

.time-section {
  display: flex;
  margin-top: 16rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  color: #999999;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}
</style>
